import React, {useState} from "react";
import {User} from "./search-panel";
import {Dropdown, Menu, Table} from "antd";
import dayjs from "dayjs";
import {TableProps} from 'antd/es/table'
// react-router 和 react-router-dom的关系 类似与react和react-dom的关系
import {Link} from "react-router-dom";
import {Pin} from "components/pin";
import {useEditProject} from "utils/project";
import { ButtonNoPadding } from "components/lib";

export interface Project {
    id: number,
    name: string,
    personId: number,
    organization: string,
    created: string,
    pin: boolean
}

interface ListProps extends TableProps<Project> {
    users: User[],
    refresh?: () => void
    projectButton:JSX.Element
}

export const List = ({users, ...props}: ListProps) => {
    const [state, setState] = useState()
    const [data, setData] = useState<unknown>([])
    const {mutate} = useEditProject()
    const pinProject = (id: number) => (pin: boolean) => mutate({id, pin}).then(props.refresh)
    return (
        <Table
            pagination={false}
            columns={[
                {
                    title: <Pin checked={true} disabled={true}/>,
                    render(value, project) {
                        return <Pin checked={project.pin} onChecledChange={pinProject(project.id)}/>
                    }
                },
                {
                    title: "名称",
                    // dataIndex: 'name',
                    sorter: (a, b) => a.name.localeCompare(b.name),
                    render(value, project) {
                        return <Link to={String(project.id)}>{project.name}</Link>
                    }
                },
                {
                    title: "部门",
                    dataIndex: 'organization',
                },
                {
                    title: "负责人",
                    render(value, project) {
                        return (
                            <span>
                                {users.find((user: User) => user.id === project.personId)?.name || '未知'}
                            </span>
                        )
                    }
                }, {
                    title: '创建时间',
                    render(value, project) {
                        {
                            return project.created ? dayjs(project.created).format('YYYY-MM-DD') : '无'
                        }
                    }
                },{
                render(value){
                    return <Dropdown overlay={<Menu>
                        <Menu.Item key={'edit'}>
                            {props.projectButton}
                        </Menu.Item>
                    </Menu>}>
                        <ButtonNoPadding type={'link'} >...</ButtonNoPadding>
                    </Dropdown>
                }
                }
            ]}
            {...props}
        >
        </Table>
    )

}
